import React, { useEffect, useState } from 'react';
import { View } from '@tarojs/components';
import { durationTimeFormat } from '@/utils/time';
import './index.scss';

const statusList = [
  /*  status
        退款 1 2 3 9 10
        退货 1 3 4 5 6 9 10
        换货 1 3 4 5 6 7 8 9 10
    */
  { title: '待商家审核', text: '您的申请提交成功，正在等待商家审核，请耐心等待' }, //1
  //退货  kind:2
  {
    title: '商家拒绝您的退货申请',
    text: '商家拒绝您的退货申请，建议与商家联系或修改申请',
    tip: '拒绝说明：',
    tipMore: true,
  }, //3
  {
    title: '请寄出商品并填写物流信息',
    text: '商家已同意您的退货申请，请尽快寄出商品并填写物流信息',
    tip:
      '未与商家协商一致，请勿使用到付或平邮，以免商家拒签货物；请填写真实物流信息，逾期未填写，退货申请将关闭！',
  }, //4
  { title: '请等待商家收货并退款', text: '如果商家收到货并验货无误，将操作并退款给您' }, //5
  { title: '商家拒绝收货，待买家处理', text: '商家拒绝收货，建议与商家联系' }, //6
  { title: '退货成功', text: '您的售后申请已退款成功，请您注意查收' }, //9
  //换货  kind:3
  {
    title: '商家拒绝您的换货申请',
    text: '商家拒绝您的换货申请，建议与商家联系或修改申请',
    tip: '拒绝说明：',
    tipMore: true,
  }, //3
  {
    title: '请寄出商品并填写物流信息',
    text: '商家已同意您的换货申请，请尽快寄出商品并填写物流信息',
    tip:
      '未与商家协商一致，请勿使用到付或平邮，以免商家拒签货物；请填写真实物流信息，逾期未填写，换货申请将关闭！',
  }, //4
  { title: '请等待商家收货', text: '等待商家收货并验货' }, //5
  { title: '商家拒绝收货，待买家处理', text: '商家拒绝收货，建议与商家联系' }, //6
  { title: '商家已收货，待发出换货商品', text: '商家已确认收货，正在为您打包换货商品，请耐心等待' }, //7
  { title: '商家已发出换新货', text: '商家已发出换新货，请耐心等待快递' }, //8
  { title: '换货成功', text: '换货商品已确认收货，换货完成' }, //9
  //退款 kind:1
  { title: '商家拒绝退款', text: '商家拒绝您的退款申请，建议与商家联系或修改退款申请!' }, //3
  { title: '退款中', text: '正在为您退款中，请耐心等待' }, //2
  { title: '退款成功', text: '您的售后申请已退款成功，请您注意查收' }, //9
  //已撤销申请
  { title: '申请已撤销', text: '您的申请已成功撤销' }, //10
];

const getStatusIndex = (kind, status) => {
  let index = 0;
  switch (status) {
    case 1:
      index = 0;
      break;
    case 2:
      index = 14;
      break;
    case 3:
      index = kind == 1 ? 13 : kind == 2 ? 1 : 6;
      break;
    case 4:
      index = kind == 2 ? 2 : 7;
      break;
    case 5:
      index = kind == 2 ? 3 : 8;
      break;
    case 6:
      index = kind == 2 ? 4 : 9;
      break;
    case 7:
      index = 10;
      break;
    case 8:
      index = 11;
      break;
    case 9:
      index = kind == 1 ? 15 : kind == 2 ? 5 : 12;
      break;
    case 10:
      index = 16;
      break;
    default:
      break;
  }
  return index;
};

const timeLeaveTxt = (deadTime) => {
  let nowTime = Date.now();
  let mlTimeStr = deadTime >= nowTime ? durationTimeFormat(deadTime - nowTime, '还剩') : '';
  return mlTimeStr;
};

const TimeDisplay = ({ deadTime }) => {
  const [displayTxt, setDisplayTxt] = useState('');

  useEffect(() => {
    let timerId = setInterval(() => {
      let txt = timeLeaveTxt(deadTime);
      txt.length > 0 && setDisplayTxt(txt);
    }, 1000);
    return () => {
      timerId && clearInterval(timerId);
    };
  }, []);

  return <View className="timeTxt">{displayTxt}</View>;
};

const Status = ({ detail = {}, className = '' }) => {
  const { status, kind, merchantRemark = '' } = detail;
  let index = getStatusIndex(kind, status);
  return (
    <View className={'Status box2 ' + className}>
      <View className="flex-row--center">
        <View className="txt32 black085 blod">{statusList[index].title}</View>
        {statusList[index].endTime && <TimeDisplay deadTime={statusList[index].endTime} />}
      </View>
      <View className="txt24 explain">{statusList[index].text}</View>
      {statusList[index].tip && (
        <View className="tipBox">
          <View className="txt22 gray tip">
            {statusList[index].tip + (statusList[index].tipMore ? merchantRemark : '')}
          </View>
        </View>
      )}
    </View>
  );
};

export default Status;
